<template>
  <el-table
    v-bind="{ ...props, ...$attrs }"
    height="100%">
    <el-table-column
      v-if="selection"
      type="selection"
      width="55" />
    <el-table-column
      v-if="index"
      label="序号"
      type="index"
      width="80"
      align="center">
      <template
        #default="{ $index }"
        v-if="page">
        {{ (page.index - 1) * page.size + $index + 1 }}
      </template>
    </el-table-column>
    <el-table-column
      v-for="column in columns"
      v-bind="column"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      align="center">
      <template
        #default="{ row }"
        v-if="column.template">
        <slot
          :name="column.prop"
          :row="row"></slot>
      </template>
    </el-table-column>
    <el-table-column
      v-if="rowButtons.length"
      fixed="right"
      label="操作"
      align="center"
      width="120">
      <template
        #default="scope"
        v-if="rowButtons.length <= 2">
        <el-button
          v-for="item in rowButtons"
          :key="item.value"
          link
          type="primary"
          size="small"
          @click.stop="item.click(scope.row)">
          {{ item.label }}
        </el-button>
      </template>
      <template
        #default="scope"
        v-else>
        <div class="operateCell">
          <el-button
            link
            class="firstBtn"
            type="primary"
            size="small"
            @click.stop="rowButtons[0].click(scope.row)">
            {{ rowButtons[0].label }}
          </el-button>
          <el-dropdown>
            <el-button
              link
              type="primary"
              size="small">
              更多
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="item in rowButtons.slice(1)"
                  :key="item.value">
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click.stop="item.click(scope.row)">
                    {{ item.label }}
                  </el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { type PropType } from 'vue'
interface Column {
  prop: string // 接口中的字段名
  label: string // 展示的字段名称
  template?: boolean // 是否自定义模板
  visible?: boolean // 是否展示（支持后期控制表格列显示），默认为true
  [key: string]: any // ele Table-column支持的属性
}

interface Button {
  label: string
  value: string
  click: Function
}

interface Page {
  index: number
  size: number
}
const props = defineProps({
  index: {
    type: Boolean,
    default: true
  },
  selection: {
    type: Boolean,
    default: false
  },
  columns: {
    type: Array as PropType<Column[]>,
    required: true,
    default: () => []
  },
  page: {
    type: Object as PropType<Page>
  },
  rowButtons: {
    type: Array as PropType<Button[]>,
    default: () => []
  }
})
</script>
<style lang="scss" scoped>
.operateCell {
  display: flex;
  justify-content: center;
  width: 100%;

  .firstBtn {
    margin-right: 20px;
  }
}
// :deep(.el-table__body) {
//   .el-table__expand-icon,
//   .el-table__placeholder {
//     position: absolute;
//     left: 0;
//     top: 0;
//   }
// }
</style>
